<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">
        <div v-if="!member.probationaryThoughtReports || member.probationaryThoughtReports.length === 0"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 flex items-center justify-center">
          <n-empty description="暂无预备期思想汇报" />
        </div>

        <div v-for="(report, index) in member.probationaryThoughtReports" :key="index" :id="`report-page-${index}`"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 flex flex-col">

          <h1 class="text-2xl font-bold text-center mb-8">预备党员思想汇报{{ index + 1 }}</h1>

          <div class="flex-grow break-words">敬爱的党组织：
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;自从我被党组织批准为中共预备党员以来，在党组织的严格要求和支部党员的无私帮助下，经过自己的积极努力，在政治思想方面都有了较大的提高。特别是通过参加党内一系列活动，使我对党的基本知识和理论有了更深入的理解，也更坚定了我为共产主义事业奋斗终身的信念。现将我预备期的思想情况向党组织汇报如下：
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一、持续加强政治理论学习，筑牢思想根基
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在预备期内，我一刻也没有放松对政治理论的学习。我深入学习了习近平新时代中国特色社会主义思想、党的二十大精神以及《中国共产党章程》。通过学习，我深刻认识到，作为一名预备党员，必须在思想上和政治上时刻与党中央保持高度一致，不断提高自己的政治敏锐性和政治鉴别力。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二、以党员标准严格要求自己，发挥模范作用
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我始终牢记入党誓词，时刻用党员的标准来衡量自己的一言一行。在工作中，我勤奋敬业，勇于担当，积极完成组织分配的各项任务；在生活中，我团结同志，乐于助人，时刻注意维护党的形象。我深知预备党员不仅是一种荣誉，更是一种责任。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三、……………………………………………………………………………………………………………………………………
          </div>

          <n-space vertical align="end" class="mt-8">
            <div class="font-kaiti">汇报人：{{ member.memberName }}</div>
            <div >{{ report.signatureDate }}</div>
          </n-space>
        </div>
      </n-space>
    </div>
 <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
          <n-anchor :bound="500">
          <n-anchor-link v-for="(report, index) in member.probationaryThoughtReports" :key="`anchor-${index}`"
            :title="`预备党员思想汇报 ${index + 1} (${report.signatureDate || '无日期'})`" :href="`#report-page-${index}`" />
        </n-anchor>
      </div>
    </div>
  
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { NSpace, NEmpty, NAnchor, NAnchorLink, NAffix } from 'naive-ui';

// 用于滚动监听的容器引用
const documentContainer = ref(null);

const props = defineProps({
  member: {
    type: Object,
    default: () => ({})
  },
  validation: {
    type: Array,
    default: () => []
  }
})

</script>

<style scoped>
/* Scoped styles can be added here if needed */
</style>